<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Api from '@/services/index'
import XtxBanner from '@/components/XtxBanner.vue'
import CategorySkeleton from './components/CategorySkeleton.vue'
import type { TBannerItem } from '@/types/home'
import type { TCategoryDetail } from '@/types/category'

const categoryList = ref<TCategoryDetail[]>()
const chooseItem = ref<TCategoryDetail>()
const activeIndex = ref(0)
const bannerList = ref<TBannerItem[]>()
const loading = ref(true)

const getCatoryList = async () => {
  const res = await Api.CategoryAPI.getCatoryList()
  categoryList.value = res.result
  chooseItem.value = categoryList.value![0]
}

const getBannerList = async () => {
  const res = await Api.HomeAPI.getBannerList(2)
  bannerList.value = res.result
}

onLoad(async (options) => {
  loading.value = true
  activeIndex.value = Number(options?.type ?? 0)
  await Promise.all([getCatoryList(), getBannerList()])
  loading.value = false
})

const onTap = (index: number) => {
  activeIndex.value = index
  chooseItem.value = categoryList.value![index]
}
</script>

<template>
  <CategorySkeleton v-if="loading"></CategorySkeleton>
  <view class="viewport" v-else>
    <view class="search-panel">
      <text class="icon-search">
        <text class="input">女靴</text>
      </text>
    </view>
    <view class="categories">
      <!-- 左侧一级分类 -->
      <scroll-view class="left" scroll-y>
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          class="primary-item"
          :class="{ active: activeIndex === index }"
          @tap="onTap(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <scroll-view class="right" scroll-y>
        <view class="banner">
          <XtxBanner :list="bannerList!"></XtxBanner>
        </view>
        <view class="sub-categories">
          <view class="sub-item" v-for="sub in chooseItem?.children" :key="sub.id">
            <view class="top">
              <view class="title">{{ sub.name }}</view>
              <view class="more">全部</view>
            </view>
            <view class="goods-container">
              <!-- :url="`/pages/goods/goods?id=${g.id}`" -->
              <navigator
                :url="`/pages/goods/goods?id=${g.id}`"
                class="good"
                v-for="g in sub.goods"
                :key="g.id"
              >
                <image class="image" :src="g.picture" mode="aspectFill"></image>
                <view class="title">
                  <text class="text">{{ g.name }}</text>
                </view>
                <view class="price">
                  <text class="symbol">￥</text>
                  <text class="number">{{ g.price }}</text>
                </view>
              </navigator>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/category';
</style>
